<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            box-sizing: border-box;
        }
        #warp{
            position: relative;
            width: 406px;
            height: 406px;
            margin: 50px auto;
            border:3px #000 solid;
        }
        #box{
            position: absolute;
            left:0;
            top:0;
        }
        #box2{
            position: absolute;
            left:0;
            top:0;
            display: none;
        }
        #box div,#box2 div{
            width: 100px;
            height: 100px;
            position: absolute;
            border: 1px #fff solid;
            cursor: pointer;
        }
        .btn, .btn2{
            width: 150px;
            height: 35px;
            border-radius: 25px;
            border:1px #000 solid;
            line-height:35px;
            text-align: center;
            margin: 0 auto;
            cursor: pointer;
            margin-bottom:10px;
        }
        .mima{
            height: 150px;
            width: 200px;
            position: absolute;
            left:100px;
            top:100px;
            background: #fff;
            text-align: center;
            padding: 10px;
            display: none;
        }
        .btn3{
            margin-top:10px;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div id="warp">
    <div id="box"></div>
    <div id="box2"></div>
    <div class="mima">
        <p>输入开挂密码</p>
        <input type="text">
        <div class="btn3">确定</div>
    </div>
</div>
<div class="btn">看一看</div>
<div class="btn2">开挂</div>
</body>
<script>
    !function () {
        var img1 = '';
        var img2 = '';
        var img3 = '';
        var img4 = '';
        var img5 = '';
        var img6 = '';
        var img7 = '';
        var img8 = '';
        var warp = document.getElementById('warp');
        var box = document.getElementById('box');
        var box2 = document.getElementById('box2');
        var btn = document.getElementsByClassName('btn')[0];
        var btn2 = document.getElementsByClassName('btn2')[0];
        var arrImg = [img1,img2,img3,img4,img5,img6,img7,img8];
        btn2.onoff = true;
        var x = 4;
        var y = 4;
        var arr = [];
        var arrx = random();
        var arry = random();
        var n = 0;
        var m = true;
        for(var i = 0;i<y;i++) {
            arr[i] = [];
        }
        var str = '';
        var str1 = '';
        for(var i=0;i<y;i++) {
            for (var j = 0; j < x; j++) {
                str += '<div style="left:'+ j*100 +'px;top:'+ i*100 +'px;background-position: '+ -arrx[j]*100 +'px '+ -arry[i]*100 +'px"></div>';
                str1 += '<div style="left:'+ j*100 +'px;top:'+ i*100 +'px;background-position: '+ -j*100 +'px '+ -i*100 +'px"></div>';
            }
        }
        box.innerHTML = str;
        box2.innerHTML = str1;
        var divs = box.getElementsByTagName('div');
        var divs2 = box2.getElementsByTagName('div');
        var num = Math.round(Math.random() * (arrImg.length-1));
        for (var i = 0; i < divs.length; i++) {
            divs[i].style.backgroundImage = 'url('+ arrImg[num] +')';
            divs2[i].style.backgroundImage = 'url('+ arrImg[num] +')';
        }
        var bai = divs[divs.length-1];
        divs2[divs2.length - 1].style.backgroundColor= '#fff';
        divs2[divs2.length - 1].style.backgroundImage= 'url(//)';
        bai.onOff = true;
        var baip = bai.style.backgroundPosition;
        bai.style.backgroundColor = '#fff';
        bai.style.backgroundImage = 'url(//)'
        var yuan = null;
        var yuanp = null;
        var b = 0;
        for (var i = 0; i < divs.length; i++) {

            divs[i].index = i;
            divs[i].x = i%x;
            divs[i].y = Math.floor(i / x);
            arr[i%x].push(divs[i]);
            if(divs[i].style.backgroundPosition == '-300px -300px'){
                divs[i].style.backgroundPosition = baip;
                bai.style.backgroundPosition = '-300px -300px';
            }
            divs[i].onclick = function () {
                if(btn2.onoff){
                    if(this.onOff){
                        return;
                    }
                    fn(this.x,this.y);
                }else{
                    if(m){
                        yuan = this;
                        yuanp = this.style.backgroundPosition;
                        m = false;
                        this.onOff ? b = 1 : b = 0;
                    }else{
                        if(this.onOff){
                            if(b == 0){
                                yuan.style.backgroundImage = 'url(//)';
                                yuan.style.backgroundColor = '#fff';
                                this.style.backgroundImage = 'url('+ arrImg[num] +')';
                                this.onOff = false;
                                yuan.onOff = true;
                            }
                        }
                        if(b == 1){
                            this.style.backgroundImage = 'url(//)';
                            this.style.backgroundColor = '#fff';
                            yuan.style.backgroundImage = 'url('+ arrImg[num] +')';
                            yuan.onOff = false;
                            this.onOff = true;
                        }
                        yuan.style.backgroundPosition = this.style.backgroundPosition;
                        this.style.backgroundPosition = yuanp;
                        m = true;
                    }
                }
                panduan();
            }
        }
        var onOff = true;
        btn.onclick = function () {
            if(onOff){
                box2.style.display = 'block';
            }else{
                box2.style.display = '';
            }
            onOff = !onOff;
        }
        function fn(x,y) {
            var _this = arr[x][y];
            var top = arr[x][y-1] && arr[x][y-1];
            var but = arr[x][y+1] && arr[x][y+1];
            var left = arr[x - 1] && arr[x - 1][y];
            var right = arr[x + 1] && arr[x + 1][y];
            zuobiao(top);
            zuobiao(but);
            zuobiao(left);
            zuobiao(right);
            function zuobiao(obj) {
                if(obj && obj.onOff){
                    var objp = obj.style.backgroundPosition;
                    obj.style.backgroundImage = 'url('+ arrImg[num] +')';
                    obj.style.backgroundPosition = _this.style.backgroundPosition;
                    _this.style.backgroundPosition = objp;
                    obj.onOff = false;
                    _this.style.backgroundColor = '#fff';
                    _this.style.backgroundImage = 'url(//)'
                    _this.onOff = true;
                }
            }
        }
        function random() {
            var arr = [];
            while (arr.length<x){
                var num = Math.round(Math.random()*(x-1));
                if(!arr.includes(num)){
                    arr.push(num)
                }
            }
            return arr;
        }
        function panduan() {
            for (var i = 0; i < divs.length; i++) {
                if(divs[i].style.backgroundPosition  ==  divs2[i].style.backgroundPosition){
                    n++;
                }else{
                    n = 0;
                }
            }
            if(n >= divs.length){
                alert('胜利');
                n = 0;
            }
        }

        var btn3 = document.getElementsByClassName('btn3')[0];
        var mima = document.getElementsByClassName('mima')[0];
        btn3.onclick = function () {
            var val = this.previousElementSibling.value;
            if(val == '我就是傻狗宝'){
                btn2.onoff = false;
                mima.style.display = '';
                alert('开启成功')
            }else{
                alert('密码错误')
                mima.style.display = '';
                btn2.innerHTML = '开挂';
            }
        }
        btn2.onoff = true;
        btn2.onclick = function () {
            if(btn2.onoff){
                btn3.previousElementSibling.value = '';
                this.innerHTML = '关挂';
                mima.style.display = 'block';
            }else{
                this.innerHTML = '开挂';
                btn2.onoff = true;
            }
        }
    }();
</script>
</html>